<template>
    <block title="实验大棚室内环境">
        <div class="list">
            <div class="item">
                <div class="label">土壤PH值</div>
                <div class="val">6.5</div>
            </div>
            <div class="item">
                <div class="label">二氧化碳浓度</div>
                <div class="val">580</div>
            </div>
            <div class="item">
                <div class="label">空气温度(°c)</div>
                <div class="val">20.5</div>
            </div>
            <div class="item">
                <div class="label">空气湿度(%)</div>
                <div class="val">75</div>
            </div>
            <div class="item">
                <div class="label">土壤温度(°c)</div>
                <div class="val">16.8</div>
            </div>
            <div class="item">
                <div class="label">土壤湿度(%)</div>
                <div class="val">23</div>
            </div>

        </div>
    </block>
</template>
<script setup lang="ts">
import block from '@/components/block.vue';
import { onMounted, ref } from 'vue';
import echarts from '@/components/echarts';
</script>
<style scoped>
.list {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    border-left: 1px solid #c9ea5b66;
    border-top: 1px solid #c9ea5b66;
    margin: 1vh 0 0 0;
}

.item {
    border-right: 1px solid #c9ea5b66;
    border-bottom: 1px solid #c9ea5b66;
    width: 33%;
    height: 10vh;
    box-sizing: border-box;
}


.label {
    text-align: center;
    color: #36c7dd;
    font-size: 1.5vh;
    padding: 2vh 0 0 0;
}

.val {
    text-align: center;
    color: #fff;
    font-size: 2vh;
    font-weight: bold;
}
</style>